import React from 'react'

import api from '../../../api/gate';
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox,Upload, Button,Message,Radio,TreeSelect,DatePicker } from 'antd';
import moment from 'moment';
import AreaCascader from '../../Cascader/AreaCascader';
import SelectMarker from '../../AMap/SelectMarker';
import CommunityCascader from '../../Cascader/CommunityCascader';
import {INTERFACE_CORE_URL} from '../../../api/config';
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const { TextArea } = Input;
const dateFormat = 'YYYY/MM/DD hh:mm:ss';
const { MonthPicker, RangePicker } = DatePicker;

import './index.less'

class AdvexmaForm extends React.Component {
  state = {
    confirmDirty: false,
    imageUrl:null
  };
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {   //提交后得到from表单中得值
      values.areaId=values.areaId[values.areaId.length-1]  //设置最后一个数
      values.longitude=values.longitude_latitude[0]  //设置经度
      values.latitude=values.longitude_latitude[1]  //设置纬度
      values.relateId=values.community[values.community.length-1] //设置级联relateId
      if (!err) {
        if(values.id){
            this.updateHard(values);
        }else{
             this.addHard(values);
        }
      }
    });
  }
  handleConfirmBlur = (e) => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  }
  checkPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('Two passwords that you enter is inconsistent!');
    } else {
      callback();
    }
  }
  checkConfirm = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  }

  addHard = (values) => {
    api.post('/addHard', values).then((data) => {
      const {addfinish} = this.props;
      const result=data.data;
      if(result.code==0){
         Message.success('添加成功！');
          addfinish();
      }else{
          Message.error('添加失败！');
      }
    });
  }
  updateHard = (values) => {
    api.put('/updateHard', values).then((data) => {
          const result=data.data;
          const {upfinish} = this.props;
           if(result.code==0){
             Message.success("修改成功");
              upfinish();
           }else{
             Message.error("修改失败");
           }
    });
  }


  render() {
    const { getFieldDecorator,resetFields } = this.props.form;
    const { close , callbackParent ,roles,offices,area} = this.props;
    const hardinfo = this.props.hardinfo;
    const imageUrl = this.state.imageUrl;
    let imgStyle={};
    let phos=JSON.parse(hardinfo.photos);  //转数组
    if(hardinfo){
    //  let url=hardinfo.photos;
     // imgStyle={background:"url("+url.substring(url.indexOf('"')+1,url.lastIndexOf('"'))+"?process=image/resize,width_150,height_150"+") center center no-repeat"};
     imgStyle={background:"url("+phos[0]+"?process=image/resize,width_150,height_150"+") center center no-repeat"};
    }else{
      //imgStyle={background:"url("+imageUrl+") center center no-repeat"};
      imgStyle={background:"url("+imageUrl+") center center no-repeat"};
    }
    // 把重置表单的方法传给父亲
    callbackParent({
      resetFields:resetFields
    });

    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 14,
          offset: 0,
        },
        sm: {
          span: 14,
          offset: 6,
        },
      },
    };
    return (
      <Form onSubmit={this.handleSubmit}>
      <FormItem
          {...formItemLayout}
          label="广告图片"
          hasFeedback
        >
          {getFieldDecorator('photos', {
            rules: [{
              required: true, message: '请上传一个广告图片!',
            }],
          })(
            <Upload
              className="avatar-uploader"
              name="file"
              showUploadList={false}
            >
              {
                  <div style={imgStyle} className="avatar" ></div>
              }
            </Upload>
          )}
        </FormItem>
       <FormItem
          {...formItemLayout}
          label="广告类型"
          hasFeedback
        >
          {getFieldDecorator('type', {
              initialValue:hardinfo ? (hardinfo.state=1?'手机屏保广告':hardinfo.state=2?'手机分类广告 ':hardinfo.state=3?'广告机广告':hardinfo.state=4?'家庭锁广告':'') : ''
          })(
            <Input />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('id', {
              initialValue:hardinfo ? hardinfo.id : ''
          })(
            <Input type="hidden"/>
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="是否系统广告"
          hasFeedback
        >
          {getFieldDecorator('isSystem', {
            rules: [{
            }],
            initialValue:hardinfo?hardinfo.isSystem:1
          })(
            <RadioGroup name="isSystem">
              <Radio value={1}>是</Radio>
              <Radio value={0}>否</Radio>
            </RadioGroup>
          )}
        </FormItem>
        
        <FormItem
            {...formItemLayout}
            label="广告标题"
            hasFeedback
          >
            {getFieldDecorator('title', {
              rules: [
                { type: "array", required: true, message: '广告标题' },],
                initialValue:hardinfo ? hardinfo.title : ''
            })(
              <Input />
              )}
          </FormItem>
        <FormItem
          {...formItemLayout}
          label="广告内容"
          hasFeedback
        >
          {getFieldDecorator('content', {
            rules: [ {
              required: true, message: '广告内容', 
            }],
            initialValue:hardinfo ? hardinfo.content : ''
          })(
            <Input />
          )}
        </FormItem>
         <FormItem
          {...formItemLayout}
          label="创建时间"
          hasFeedback
        >
          {getFieldDecorator('createDate', {
             rules: [{
              required: true, message: '创建时间'},],
            initialValue:hardinfo ? hardinfo.createDate : ''
          })(
            <Input />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="处理时间"
          hasFeedback
        >
          {getFieldDecorator('dealDate', {
            rules: [ {
              required: true, message: '处理时间', },],
              initialValue:hardinfo ? hardinfo.dealDate : ''
          })(
            <Input />
          )}
        </FormItem>
       <FormItem
          {...formItemLayout}
          label="审核状态"
          hasFeedback
        >
          {getFieldDecorator('state', {
            rules: [{
              required: true, message: '审核状态!',
            }],
            initialValue:hardinfo ? (hardinfo.state=1?'待审核':hardinfo.state=2?'拒绝':hardinfo.state=3?'通过':'') : ''
          })(
            <Input />
          )}
        </FormItem>
            
        <FormItem
          {...formItemLayout}
          label="备注信息"
          hasFeedback
        >
            {getFieldDecorator('remarks', {
              rules: [{type:"array", required: true, message: '备注信息' }],
              initialValue:hardinfo ? hardinfo.remarks : ''
            })(
              <TextArea rows={4} />
              )}
           </FormItem>
        <FormItem {...tailFormItemLayout}>
          <div>
          {/*   <Button type="primary" onClick={close}>确定</Button> */}
            <Button onClick={close}>关闭</Button>
          </div>
        </FormItem>
      </Form>
    );
  }
}

const WrappedAdvexmaForm = Form.create()(AdvexmaForm);
export default WrappedAdvexmaForm
